<template>
  <div>
    <div class="list-btn">
      应还日期:<DatePicker type="date" @on-change="startTime"  placeholder="选择开始日期" style="width: 200px" ></DatePicker>
      ～<DatePicker type="date" @on-change="endTime"  placeholder="选择结束日期" style="width: 200px"  ></DatePicker>
    </div>
    <div class="list-btn">
      <Button type="primary" @click="getList(url,'refresh');get(params.channelCode)">搜索</Button>
    </div>
    <page-list :listTitle="listTitle" :list="list" :loading="loading" @selectItem="ids = $event;"></page-list>
    <page-button :current="params.pageCurrent"  :total="total" @changePageNum="params.pageCurrent = $event; getList(url)" @changePageSize="params.pageLimit = $event; getList(url)"></page-button>
  </div>
</template>

<script>
  import listMixin from '../../mixin/list'
  import pageList from '../../template/listTemplate'
  import pageButton from '../../template/pageBtnTemplate'
  import confirmDialog from '../../template/confirmDialogTemplate'
  export default {
    mixins:[listMixin],
    components: {
      pageList,
      pageButton,
      confirmDialog
    },
    methods:{
       get(s){
        console.log(s,'sss');
        if(s){
        this.$post('/bkchannel/list',{channelCode:s})
        .then((res) => {
          if(res.code === 0){
            this.channelName = res.data.pageListData[0].channelName;
          }else{
            // this.$Message.error(res.msg);
          }
        }, (err) => {
          // this.loading = false;
          console.log(err);
        })
        }else{
          this.channelName = ""
        }

      }
    },
     mounted() {
      this.getChannel();
    },
    data () {
      return {
        tag: {
          'title': '客户逾期率',
          'path': '/work/settleRate/list'
        },
         channelName:'',
        listTitle: [
          {
            title: '放款日期',
            key: 'borrowTime',
            align:'center',
            minWidth: 85,
             render: (h,params) =>{
              return h('div',this.getLocalDate(params.row.borrowTime))
            }
          },
           {
            title: '应还日期',
            key: 'repayTime',
            align:'center',
            minWidth: 85,
            render: (h,params) =>{
              return h('div',this.getLocalDate(params.row.repayTime))
            }
          },
          {
            title: '到期单数',
            key: 'expireNum',
            align:'center',
            minWidth: 80,

          },
          {
            title: '已还单数',
            key: 'repaidNum',
            align:'center',
            minWidth: 80,
          },
          {
            title: '当前还款率',
            key: 'repayRate',
            align:'center',
            minWidth: 80,
            render: (h,params) =>{
              return h('div',(params.row.repayRate*100).toFixed(2)+'%')
            }
          },
          {
            title: '首逾率',
            key: 'firstOverdueRate',
            align:'center',
            minWidth: 80,
            render: (h,params) =>{
              return h('div',params.row.firstOverdueRate == '0'?'—':(params.row.firstOverdueRate*100).toFixed(2)+'%')
            }
          },
          {
            title: '催回率',
            key: 'firstOverdueRate',
            align:'center',
            minWidth: 80,
            render: (h,params) =>{
              return h('div',params.row.firstOverdueRate == '0'?'—':((params.row.repayRate*100)+(params.row.firstOverdueRate*100)-100).toFixed(2)+'%')
            }
          },
          {
            title: '1+逾期率',
            key: 'day1Rate',
            align:'center',
             minWidth: 80,
            render: (h,params) =>{
              return h('div',(params.row.day1Rate*100).toFixed(2)+'%')
            }
          },
           {
            title: '2+逾期率',
            key: 'day2Rate',
            align:'center',
             minWidth: 80,
            render: (h,params) =>{
              return h('div',(params.row.day2Rate*100).toFixed(2)+'%')
            }
          },
           {
            title: '3+逾期率',
            key: 'day3Rate',
            align:'center',
             minWidth: 80,
            render: (h,params) =>{
              return h('div',(params.row.day3Rate*100).toFixed(2)+'%')
            }
          },
           {
            title: '4+逾期率',
            key: 'day4Rate',
            align:'center',
             minWidth: 80,
            render: (h,params) =>{
              return h('div',(params.row.day4Rate*100).toFixed(2)+'%')
            }
          },
           {
            title: '5+逾期率',
            key: 'day5Rate',
            align:'center',
             minWidth: 80,
            render: (h,params) =>{
              return h('div',(params.row.day5Rate*100).toFixed(2)+'%')
            }
          },
           {
            title: '6+逾期率',
            key: 'day6Rate',
            align:'center',
             minWidth: 80,
            render: (h,params) =>{
              return h('div',(params.row.day6Rate*100).toFixed(2)+'%')
            }
          },
           {
            title: '7+逾期率',
            key: 'day7Rate',
            align:'center',
             minWidth: 80,
            render: (h,params) =>{
              return h('div',(params.row.day7Rate*100).toFixed(2)+'%')
            }
          },
           {
            title: '15+逾期率',
            key: 'day15Rate',
            align:'center',
             minWidth: 80,
            render: (h,params) =>{
              return h('div',(params.row.day15Rate*100).toFixed(2)+'%')
            }
          },
           {
            title: '30+逾期率',
            key: 'day30Rate',
            align:'center',
             minWidth: 80,
            render: (h,params) =>{
              return h('div',(params.row.day30Rate*100).toFixed(2)+'%')
            }
          },
           {
            title: '60+逾期率',
            key: 'day60Rate',
            align:'center',
             minWidth: 80,
            render: (h,params) =>{
              return h('div',(params.row.day60Rate*100).toFixed(2)+'%')
            }
          },
           {
            title: '90+逾期率',
            key: 'day90Rate',
            align:'center',
             minWidth: 80,
            render: (h,params) =>{
              return h('div',(params.row.day90Rate*100).toFixed(2)+'%')
            }
          },
          // {
          //   title: '首逾率',
          //   key: 'firstOverdueRate',
          //   align:'center',
          //   render: (h,params) =>{
          //     let now = new Date().getTime();
          //     now = this.getLocalDate(now)
          //     let expirationTime = params.row.expirationTime;
          //     expirationTime = this.getLocalDate(expirationTime)
          //     return h('div',(new Date(expirationTime).getTime() - new Date(now).getTime())<0?(params.row.firstOverdueRate*100).toFixed(2)+'%' : '—')
          //   }
          // },
        ],
        url: '/statistics/overdue',
        nameListUrl: '',
        params: {
          //status:'',
          pageCurrent: 1,
          pageLimit: 10
        },

      }
    },
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .list-btn{
    margin-bottom: 5px;
    margin-right: 5px;
    display: inline-block;
  }
  .refresh-btn{
    float: right;
  }
  /deep/ .ivu-table-cell{
    padding-left:8px;
    padding-right:8px;
  }
</style>
